"use client"
import {Input} from "@/components/ui/input";
import {Button} from "@/components/ui/button";
import {useActionState, useState} from "react";
import Link from "next/link";
import {ActionState, RegisterForm} from "@/lib/zod/types";
import {register} from "@/lib/action/register";
import {RadioGroup, RadioGroupItem} from "@/components/ui/radio-group";
import {Label} from "@/components/ui/label";
import {redirect} from "next/navigation";
import Cropper from 'react-cropper';
import './cropper.css';

const Page = () => {
    const [state, registerFormAction, isPending] = useActionState<ActionState<RegisterForm>, FormData>(register, {
        code: 0,
        msg: "",
    });
    const [cropper, setCropper] = useState<Cropper|null>(null);
    const [image, setImage] = useState<string>("");
    if (state && state.code === 200) {
        return redirect("/login");
    }
    const onCrop = () => {
        const toDataURL = cropper?.getCroppedCanvas().toDataURL()||"";
        setImage(toDataURL);
    };

    return <>
            <div className="flex h-dvh justify-center items-center ">
                <div className="flex flex-col w-96 h-fit gap-3 border border-input bg-slate-50 p-8 rounded mx-2">
                    <Cropper
                        src={undefined}
                        aspectRatio={1}
                        viewMode={1}
                        guides={true}
                        onInitialized={(instance) => {
                            setCropper(instance)
                        }}
                    />

                    {
                        state.errors?.image &&
                        <p className={"text-red-500 text-sm"}>{state.errors?.image.join("、")}</p>
                    }
                    <div className={"flex items-center  gap-2"}>
                        <Button className={"relative "} variant={"outline"} type={"button"}>
                            选择图片
                            <Input name={"username"} type={"file"} className={"w-full h-full opacity-0 z-10 absolute top-0 left-0 p-0"} onChange={async (event) => {
                                const files = event.currentTarget.files;
                                if (files && files.length > 0 && cropper) {
                                    const reader = new FileReader();
                                    reader.readAsDataURL(files[0]);
                                    reader.onload = (event) => {
                                        cropper.replace(event.target?.result?.toString()||"");
                                    };
                                }
                            }}/>
                        </Button>
                        <Button className={"relative "} variant={"outline"} type={"button"} onClick={onCrop}>
                            确定裁剪
                        </Button>
                    </div>

                    <form  action={registerFormAction} className={"flex flex-col w-full h-fit gap-3 bg-slate-50 rounded"}>
                        {/*头像图片*/}
                        <input type={"hidden"} name={"image"} value={image}/>
                        <div className={"flex items-center"}>
                            <div
                                className={"flex-shrink-0 w-20 flex justify-center before:text-red-500 before:content-['*']"}>用户名：
                            </div>
                            <div className={"flex-grow"}>
                                <Input name={"username"} defaultValue={state.input?.username}/>
                                {
                                    state.errors?.username &&
                                    <p className={"text-red-500 text-sm"}>{state.errors?.username.join("、")}</p>
                                }
                            </div>
                        </div>
                        <div className={"flex items-center"}>
                            <div
                                className={"flex-shrink-0 w-20 flex justify-center before:text-red-500 before:content-['*']"}>邮箱：
                            </div>
                            <div className={"flex-grow"}>
                                <Input name={"email"} defaultValue={state.input?.email}/>
                                {
                                    state.errors?.email &&
                                    <p className={"text-red-500 text-sm"}>{state.errors?.email.join("、")}</p>
                                }
                            </div>
                        </div>
                        <div className={"flex items-center"}>
                            <div
                                className={"flex-shrink-0 w-20  flex justify-center before:text-red-500 before:content-['*']"}>密码：
                            </div>
                            <div className={"flex-grow"}>
                                <Input name={"password"} type={"password"} defaultValue={state.input?.password}
                                       autoComplete={"off"}/>
                                {
                                    state.errors?.password &&
                                    <p className={"text-red-500 text-sm"}>{state.errors?.password.join("、")}</p>
                                }
                            </div>
                        </div>
                        <div className={"flex items-center"}>
                            <div
                                className={"flex-shrink-0 w-20  flex justify-center before:text-red-500 before:content-['*']"}>再次输入密码：
                            </div>
                            <div className={"flex-grow"}>
                                <Input name={"pwd"} type={"password"} defaultValue={state.input?.pwd}
                                       autoComplete={"off"}/>
                                {
                                    state.errors?.pwd &&
                                    <p className={"text-red-500 text-sm"}>{state.errors?.pwd.join("、")}</p>
                                }
                            </div>
                        </div>
                        <div className={"flex items-center"}>
                            <div className={"flex-shrink-0 w-20  flex justify-center"}>性别：</div>
                            <div className={"flex-grow"}>
                                <RadioGroup name={"sex"} className={"flex justify-around"}
                                            defaultValue={state.input?.sex || "male"}>
                                    <div className="flex items-center space-x-2">
                                        <RadioGroupItem value="male" id="r1"/>
                                        <Label htmlFor="r1">男</Label>
                                    </div>
                                    <div className="flex items-center space-x-2">
                                        <RadioGroupItem value="female" id="r2"/>
                                        <Label htmlFor="r2">女</Label>
                                    </div>
                                </RadioGroup>
                            </div>
                        </div>
                        <div className={"flex justify-center"}>
                            <Button type={"submit"}>{isPending ? "提交中" : "提交"}</Button>
                            <Link href={"/login"}><Button variant={"link"} type={"button"}>跳转登录</Button></Link>
                        </div>
                    </form>

                </div>
            </div>
    </>
}

export default Page;